<!-- src/views/admin/settings/components/BasicInfo.vue -->
<template>
  <div>
    <h2>基本信息</h2>
    <el-form :model="form" ref="formRef" label-width="100px">
      <el-form-item label="头像">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon><Plus /></el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input disabled v-model="form.username" style="max-width: 300px;" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" style="max-width: 300px;" />
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="form.phone" style="max-width: 300px;" />
      </el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="save">重置</el-button>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@element-plus/icons-vue';
import { ref } from 'vue';
import {ElMessage} from "element-plus";

import type { UploadFile } from 'element-plus'

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
const form = ref({
  avatar: '',
  username: '',
  email: '',
  phone: '',
});

// 处理头像上传成功
const handleAvatarSuccess = (response: any, file: any) => {
  form.value.avatar = URL.createObjectURL(file.raw); // 使用本地文件生成 URL
};

// 上传前的验证
const beforeAvatarUpload = (file: File) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp';
  const isLt2M = file.size / 1024 / 1024 < 2; // 限制文件大小为 2MB
  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
};

const save = () => {
  // 保存基本信息逻辑
  console.log('保存基本信息:', form.value);
};
</script>

<style scoped>
.avatar-uploader {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid #dcdfe6;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
